import React, { useState } from "react";
import { connect } from "react-redux";

const mapDispatchToProps = (dispatch) => {
  return {
    add(value) {
      dispatch({ type: "add", name: value });
    },
  };
};

const Form = (props) => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <input type="text" value={value} onChange={handleChange} />
      <button
        onClick={() => {
          props.add(value);
          setValue("");
        }}
      >
        添加
      </button>
    </>
  );
};

export default connect(null, mapDispatchToProps)(Form);
